'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';

import NavBar from '../../../../core/component-biz/comp.nav-swich-bar';
import UserInfoBar from '../../../../core/component-biz/comp.user-info-bar';
import IconButton from '../../../../core/component/comp.icon-button';
import GridView from '../../../../core/component/comp.grid-view';
import PeopleInfoItem from "../../../../core/component-biz/comp.people-info-panel";
import Util from "../../../../core/utils/util";
import API from "../../../../constants/server-apis";
import Http from '../../../../core/utils/http';
import Color from '../../../../core/constant/color';

class ApiListScene extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: "API Doc 文档",
        headerTintColor: "white",
        tabBarVisible: false,
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null
        },
    });

    constructor(props) {
        super(props);
        this.state = {
            apiResult: '',

        }
    }


    componentDidMount() {

    }

    getApiParamsList() {
        const {apiInfo} = this.props.navigation.state.params;
        const {parms} = apiInfo.doc;
        let apiParamsList = [];

        if (parms) {
            const ApiKeys = Object.keys(parms);
            ApiKeys.map((key, index) => apiParamsList.push({
                name: key,
                paramInfo: parms[key],
            }))
        }
        return apiParamsList;
    }

    genApiParamUI(item, index) {
        const key = item.name;
        const value = this.state[key];
        return (
            <View key={`api-param-${index}`} style={styles.paramInputPanelOut}>
                <View style={styles.paramInputPanel}>
                    <Text style={styles.apiTextInputName}>{item.name}:</Text>
                    <TextInput style={styles.apiTextInput} onChangeText={(val) => this.setState({[key]: val})}
                               value={value}/>
                    <Text>{item.paramInfo.isRequired ? "*" : ""}</Text>
                </View>
                {item.paramInfo.desc && <View>
                    <Text style={styles.apiTextInputTips}>{item.paramInfo.desc}</Text>
                </View>}
            </View>
        );
    }

    genApiRequestParamsUI() {
        const apiParams = this.getApiParamsList()
        return apiParams.map((item, index) => this.genApiParamUI(item, index))
    }

    onPressSubmitApi = () => {
        const apiParams = this.getApiParamsList()
        //检查API是否填写完善
        let apiNeedParams = {};

        for (let index in apiParams) {
            const api = apiParams[index];
            console.log(api, "---->api")
            const key = api.name;
            const value = this.state[key];
            console.log(this.state, "----> this.state")
            if (api.paramInfo.isRequired && Util.isEmpty(value)) {
                Util.showToast(`此API中[ ${api.name} ]为必填字段`)
                return;
            }
            apiNeedParams[key] = value;
        }

        //发送API请求
        Http.fetch(API.API_USER_LOGIN_URL, apiNeedParams.empId, apiNeedParams).then((json) => {
            this.setState({
                apiResult: JSON.stringify(json),
            });
        })

    }

    genApiResultUI() {
        const {apiResult} = this.state
        console.log('api-result:',apiResult)
        if (apiResult) {
            return (<View style={styles.apiResultPanel}>
                <Text style={styles.apiResultText}>{apiResult}</Text>
            </View>);
        }

    }

    genSubmitApiUI() {
        return (
            <IconButton style={styles.btnSubmitApi} title="测试API" onPress={this.onPressSubmitApi}/>
        );
    }

    genApiInfoUI() {
        const {apiInfo} = this.props.navigation.state.params;
        return (
            <View>
                <View style={styles.apiInfoPanel}>
                    <Text style={styles.apiName}>API名称:{apiInfo.doc.name}</Text>
                    <Text style={styles.apiFuncTitle}>API功能:</Text>
                    <Text style={styles.apiFuncDesc}>{apiInfo.doc.desc}</Text>
                </View>
                <View style={styles.apiTestPanel}>
                    <Text style={styles.textApiTitle}>测试API</Text>
                    {this.genApiRequestParamsUI()}
                    {this.genSubmitApiUI()}
                    {this.genApiResultUI()}
                </View>

            </View>
        );
    }


    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={styles.scrollView}>
                    {this.genApiInfoUI()}
                </ScrollView>
            </View>
        )
    }

}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    scrollView: {},

    apiItem: {
        padding: 8,
    },
    apiInfoPanel: {
        padding: 8,
    },
    apiTestPanel: {
        marginTop: 8,
    },
    apiName: {
        fontSize: 16,
        margin: 8,
    },
    apiFuncTitle: {
        margin: 8,
        marginBottom: 0,
    },
    apiFuncDesc: {
        margin: 8,
        color: 'gray',
    },
    textApiTitle: {
        margin: 16,
        marginBottom: 8,

    },
    paramInputPanelOut: {
        // borderWidth: 1,
    },
    paramInputPanel: {
        flexDirection: 'row',
        paddingTop: 8,
        alignItems: 'center',
        marginRight: 8,
        marginLeft: 8,
        paddingBottom: 2,
        // borderWidth: 1,
    },
    apiTextInputName: {
        minWidth: 100,
        textAlign: 'right',
        marginLeft: 8,
        marginRight: 8,
    },
    apiTextInput: {
        borderWidth: 1,
        borderRadius: 4,
        flex: 1,
        marginRight: 8,
        padding: 4,
    },
    apiTextInputTips: {
        marginRight: 8,
        marginLeft: 125,
        color: 'gray',
        fontSize: 12,
        textAlign: 'left',
        marginBottom: 2,
    },
    btnSubmitApi: {
        margin: 8,
    },
    apiResultPanel: {
        margin: 8,
        borderWidth: 1,
        padding: 8,
        borderRadius: 4,
    },
    apiResultText:{
        fontSize:12,
        color:'gray',
    },
});

export default ApiListScene;